<script setup lang="ts">
import { useRouter, useRoute } from 'vue-router';
import type { RouteLocationRaw } from 'vue-router';
import { reactive, ref, watch, computed } from 'vue';
import { ElMessage } from 'element-plus';
const router = useRouter();
const route: any = useRoute();

const switch1 = (id: number, e: any) => {
  router.push(data.TitleList[id - 1].path as RouteLocationRaw);
  data.navCurrent = data.TitleList[id - 1].title;
  data.activeStyle.left = e.currentTarget.offsetLeft + 'px';
  data.currentIndex = id;
};

const back = () => {
  router.push('/');
};

const open = () => {
  ElMessage({
    message: '欢迎游客登录',
    grouping: true,
    type: 'success',
  });
};
ElMessage({
  message: route.query.message,
  grouping: true,
  type: 'success',
});

const data = reactive({
  activeStyle: { left: '31px' },
  currentIndex: 1,
  fontColor: { color: '#067cf8' },
  navCurrent: '课程大厅',
  TitleList: [
    {
      id: 1,
      title: '课程大厅',
      icon: 'House',
      path: '/coursehall',
    },
    {
      id: 2,
      title: '我的课程',
      icon: 'Notebook',
      path: '/mycourse',
    },
    {
      id: 3,
      title: '我的班级',
      icon: 'Avatar',
      path: '/myclass',
    },
    {
      id: 4,
      title: '排行榜',
      icon: 'TrophyBase',
      path: '/ranklist',
    },
    {
      id: 5,
      title: '数据分析',
      icon: 'Histogram',
      path: '/analysis',
    },

    {
      id: 6,
      title: '综合竞赛',
      icon: 'GoldMedal',
      path: '/competition',
    },
    {
      id: 7,
      title: '个人中心',
      icon: 'User',
      path: '/personal',
    },
    // {
    //   id: 8,
    //   title: '备忘录',
    //   icon: 'List',
    //   path: '/memo',
    // },
  ],
});
</script>

<template>
  <!-- <el-button :plain="true" @click="open">Show message</el-button> -->
  <div class="container">
    <div class="container_top">
      <div class="logo">
        <img src="@/assets/imlogo.svg" alt="" />
        <div class="title" @click="back">智慧学习平台</div>
      </div>
      <!-- <Animate1></Animate1>  -->
      <button class="back" @click="back">
        <el-icon>
          <SwitchButton />
        </el-icon>
      </button>
    </div>
    <div class="center header animate__animated animate__fadeInDown">
      <div class="active" :style="data.activeStyle"></div>
      <div class="header_title" :class="data.currentIndex == item.id ? 'hover' : ''" :style="data.currentIndex == item.id ? data.fontColor : ''" v-for="item in data.TitleList" :key="item.id" @click="switch1(item.id, $event)">
        <el-icon>
          <!-- 动态组件的方式显示图标 -->
          <component :is="item.icon"></component>
        </el-icon>
        {{ item.title }}
      </div>
    </div>
    <div class="center main animate__animated animate__fadeInUp">
      <!-- 路由出口 -->
      <router-view></router-view>
    </div>
  </div>
</template>
<style scoped lang="scss">
.container {
  width: 100%;
  height: 100%;
  padding: 4vh 0;

  &_top {
    @include flex(space-between);
    margin-bottom: 10px;
    .logo {
      margin-left: 4vw;
      @include flex(center);
      img {
        width: 45px;
        height: 45px;
      }
      .title {
        // margin-left: 4vw;
        font-size: 20px;
        font-family: 华文行楷;
        // margin-bottom: 2vh;
        color: $blue-color;
        color: $theme-color;
        cursor: pointer;
      }
    }
    .back {
      background-color: $bgcolor;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      border: none;
      margin-right: 4vw;
      font-size: 25px;
      color: #ffffff;
      box-shadow: -2px -2px 8px rgba(255, 255, 255, 1), -2px -2px 12px rgba(255, 255, 255, 0.5), inset 2px 2px 4px rgba(255, 255, 255, 0.1), 2px 2px 8px rgba(0, 0, 0, 0.15);
      color: $blue-color;
      color: $theme-color;

      cursor: pointer;
    }

    .back:active {
      box-shadow: inset -2px -2px 8px rgba(255, 255, 255, 1), inset -2px -2px 12px rgba(255, 255, 255, 0.5), inset 2px 2px 4px rgba(255, 255, 255, 0.1), inset 2px 2px 8px rgba(0, 0, 0, 0.15);
      transform: scale(0.95);
      color: #35e135;
      text-shadow: 0 0 10px #37ff37;
    }
  }

  .center {
    width: 90vw;
    margin: auto;
    margin-bottom: 3vh;
  }

  .header {
    position: relative;
    height: 6vh;
    border-radius: 5px;
    display: flex;
    box-shadow: $box-shadow;

    &_title {
      height: 100%;
      width: 100px;
      line-height: 6vh;
      margin: 0 2vw;
      text-align: center;
      cursor: pointer;
      @include flex;
    }

    .active {
      position: absolute;
      height: 100%;
      width: 100px;
      box-shadow: inset 3px 3px 4px #c8d0e7, inset -3px -3px 4px #fff;
      border-radius: 10px;
      transition-duration: 0.6s;
      transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    }

    .hover {
      animation: gooeyEffect-4 250ms 1;
    }
  }

  .main {
    height: 80vh;
    border-radius: 5px;
    overflow: hidden;
    position: relative;
    box-shadow: 6px 6px 10px -1px rgba(0, 0, 0, 0.15), -6px -6px 10px -1px rgba(255, 255, 255, 0.7);
  }
}

@keyframes gooeyEffect-4 {
  0% {
    transform: scale(1, 1);
  }

  50% {
    transform: scale(0.5, 1.5);
  }

  100% {
    transform: scale(1, 1);
  }
}

// 响应式媒体查询

@media screen and (max-width: 1000px) {
  .header_title {
    font-size: 12px;
    width: 80px;
  }

  .header .active {
    width: 80px !important;
  }
}
</style>
